import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

items = [
    dbc.DropdownMenuItem('条目 1'),
    dbc.DropdownMenuItem('条目 2'),
    dbc.DropdownMenuItem('条目 3'),
]

dropdownMenu_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('DropdownMenu：使用下拉菜单来组织链接和按钮列表到一个可切换的位置', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Row(
            [
                dbc.Col(dbc.DropdownMenu(items, label='按钮样式1', color='primary', class_name='m-1'), width='auto'),
                dbc.Col(dbc.DropdownMenu(items, label='按钮样式2', color='secondary', class_name='m-1'), width='auto'),
                dbc.Col(dbc.DropdownMenu(items, label='按钮样式3', color='success', class_name='m-1'), width='auto'),
                dbc.Col(dbc.DropdownMenu(items, label='按钮样式4', color='warning', class_name='m-1'), width='auto'),
                dbc.Col(dbc.DropdownMenu(items, label='按钮样式5', color='danger', class_name='m-1'), width='auto'),
                dbc.Col(dbc.DropdownMenu(items, label='按钮样式6', color='info', class_name='m-1'), width='auto'),
            ]
        ),
        html.Br(),
        dbc.DropdownMenu(
            [
                dbc.DropdownMenuItem('选项一'),
                dbc.DropdownMenuItem('选项二'),
                dbc.DropdownMenuItem('选项三'),
            ],
            label='自定义样式',
            class_name='m-1',
            toggle_style={
                'textTransform': 'uppercase',
                'background': 'rgb(255, 153, 51)',
            },
            toggle_class_name='fst-italic border border-dark',
        )
    ]
)